<template>
	<view class="">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="茶室余额" back @onBack="goBack" @topTotalHeight="topTotalHeight"
		></navbar>
		<view class="pl20r pt20r pr20r f26r colFff boSiBorBox poRel"
			:style="'height: ' + 'calc(100vh - ' + calcNum + 'px);'"
		>
			<scroll-view scroll-y="true" class="hPer100 poRel"
				:refresher-enabled="true" @refresherrefresh="orderRefresh" :refresher-triggered="ordertri0"
			>
				<view class="backImgLiGrTR2c6739a99c043 borRad30r pl20r pr20r pt20r mb20r"
					v-for="(item1, index1) in walletList" :key="item1.id"
					@click="cliTeaList(item1.tid)"
				>
					<view>
						{{item1.name}}
					</view>
					<view class="disFlex mt30r pb20r">
						<view class="flex1">
							¥
							<text class="f38r">
								{{item1.balance}}元
							</text>
						</view>
						<view class="flex1 teAliRight">
							<view class="disInBlo w120r teAliCenter lh46r borRad25r bor1SFff"
								@click.stop="cliRechargeBtn(item1.tid)"
							>
								充值
							</view>
						</view>
					</view>
					<view class="lh70r disFlex f24r borT1DFff">
						<view class="flex1 webLiCl1 webBoxOrVer overHid disWebBox">
							使用范围：{{item1.name}}
						</view>
						<view class="w170r teAliRight">
							<image :src="baseUrl + 'iconLocationWhite.png'" mode="aspectFit"
								class="w30r h30r poRel top4r"
							></image>
							{{item1.distance}}km
						</view>
					</view>
				</view>
				<view class="lh100r teAliCenter col999" v-if="walletList.length">
					已加载全部
				</view>
				<view class="col999 poAbs top50P left50P trTrn50Pn50P" v-if="walletList.length == 0">
					暂无数据
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { getTeabalance } from '@/utils/api.js'
import { baseUrl } from '@/utils/request.js'
export default {
	components: { navbar },
	data() {
		return {
			baseUrl,
			calcNum: 0,
			walletList: [],
			ordertri0: false,
		}
	},
	onShow() {
		this.getDataList1();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		topTotalHeight(height) {
			// #ifdef MP-WEIXIN
				this.calcNum = height;
			// #endif
			// #ifdef H5
				this.calcNum = 0;
			// #endif
		},
		getDataList1(callBack) {
			let lngAndLat = uni.getStorageSync('lngAndLat');
			if(lngAndLat && lngAndLat.longitude && lngAndLat.latitude) {
				getTeabalance({
					token: uni.getStorageSync('token'),
					lng: lngAndLat.longitude, lat: lngAndLat.latitude
				}).then(res => {
					console.log(lngAndLat, res)
					if(res.data && res.data.length) {
						this.walletList = res.data;
						this.walletList.forEach(item => {
							item.distance = Number(item.distance).toFixed(2);
						})
					}
					if(callBack) callBack();
				})
			}else {
				uni.showModal({
					title: '提示', confirmColor: '#99c043',
					content: '检测到您没打开获取信息功能权限，请到首页点击右上角打开',
					confirmText: '去首页', 
					success: (res1) => {
						if (res1.confirm) {
							uni.switchTab({ url: '/pages/index/index' })
						}
					}
				})
				if(callBack) callBack();
			}
		},
		orderRefresh() {
			if(!this.ordertri0) {
				this.ordertri0 = true;
				this.getDataList1(() => {
					this.ordertri0 = false;
				});
			} 
		},
		cliTeaList(tid) {
			uni.navigateTo({
				url: '/pages/index/teahouseDetail?type=2&item1=' + tid
			})
		},
		cliRechargeBtn(tid) {
			uni.navigateTo({
				url: '/pages/index/recharge?tid=' + tid + '&type=1'
			})
		},
	}
}
</script>
<style>
</style>